<!-- 基础搜索组件。 -->
<template>
  <div class="t-pagination-select-demo" style="width:100%;min-height:100px;padding:15px;">
    <el-form
      :model="addForm"
      :rules="addFormRules"
      ref="addForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="品名(原料)" prop="dogId">
        <paginationSelect
          v-if="paginationOption.total>0"
          :total="paginationOption.total"
          width="300"
          :page.sync="paginationOption.currentPage"
          :limit.sync="paginationOption.pageSize"
          :optionSource="materialIdArr"
          v-model="addForm.dogId"
          labelKey="label"
          valueKey="value"
          @getList="getList"
        />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submitImportForm">提交</el-button>
  </div>
</template>

<script>
  import paginationSelect from "./component/pagination-select/src"
  // import data from './data.json'
  // import data2 from './data2.json'
  export default {
    name: 'selectPagination',
    components:{
      paginationSelect
    },
    created () {
      this.init()
    },
    data () {
      return {

        addForm: {
          dogId: "", // 产出品名
        },

        addFormRules: {
          dogId: [
            { required: true, message: '请选择品名(原料)！', trigger: 'change' }
          ]
        },

        materialIdArr: [],

        paginationOption: {
          pageSize: 5, // 每页显示条数
          currentPage: 1, // 当前页
          pagerCount: 5, // 按钮数，超过时会折叠
          total: 0// 总条数
        }

      }
    },

    methods: {
      init(){
        for (let i = 0; i <20 ; i++) {
          let obj = {
            label:`修狗${i}`,
            value:`${i}`
          }
          this.materialIdArr.push(obj)
        }
        console.log("materialIdArr", this.materialIdArr)
        this.materialIdArrCopy = JSON.parse(JSON.stringify(this.materialIdArr)) // 复制一份
        this.paginationOption.total = this.materialIdArr.length
        this.materialIdArr = this.materialIdArrCopy.slice(0,this.paginationOption.pageSize)
      },
      // 下拉选择分页
      getList () {
        // console.log(this.paginationOption.currentPage)
        if (this.paginationOption.currentPage>1){
            this.materialIdArr = this.materialIdArrCopy.slice((this.paginationOption.currentPage-1)*this.paginationOption.pageSize,(this.paginationOption.currentPage)*this.paginationOption.pageSize)
        }else{
          this.materialIdArr = this.materialIdArrCopy.slice(0,this.paginationOption.pageSize)
        }

      },

      submitImportForm () {
        this.$refs.addForm.validate(async (valid) => {
          if (!valid) return
          console.log('提交', this.addForm)
        })
      },
    }
  }
</script>
<style  scoped>

</style>

